<template>
	<view class="tui-content-box">

		<view class="tui-box">
			<view class="withdraw-account">
				<view class="withdraw-account-h1" v-if="account_id">
					<view class="account-name">卡号信息:</view>
					<view class="account-list" v-if="account_id" @click="addAccount()">{{account_number}}</view>
				</view>
				<view class="withdraw-account-h1" v-else>
					<view class="account-list" @click="addAccount()">请添加提现账号</view>
				</view>
			</view>
			<view class="withdraw-box">
				<view class="box-name">提现金额</view>
				<view class="box-input">
					<view class="ms">￥</view>
					<input placeholder-class="tui-phcolor" class="inputs" @input="inputMoney" placeholder="请输入提现金额" maxlength="11" type="text" />
				</view>
				<view class="box-notice">
					当前账户消费劵余额:
					<view class="withdraw-nums">{{account.balance}}</view>
				</view>
			</view>
			<view class="tui-btn-box">
				<tui-button shadow height="88rpx" shape="circle" type="danger" @click="btnSave()">提 现</tui-button>
			</view>
			<view class="tui-btn-box">
				<tui-button shadow height="88rpx" shape="circle" type="warning" @click="waterList()">提现记录</tui-button>
			</view>
		</view>
		<view class="withdraw-txt">
			温馨提示<br>
			提现金额最少为100,提现必须为100的倍数！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				error: true,
				withdraw: null,
				account: '',
				money: '',
				msg: null,
				account_id: '',
				noClick: false,
				account_number: '',
			}
		},
		onShow() {
			this.tui.haslogin();
			if(this.tui.isLogin()){
				this.init();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			init() {
				let token = this.tui.getToken();
				let account = this.tui.request('user', 'post', {
					token: token
				}, 1000, 1, '', 'userAccountInfo');
				Promise.resolve(account).then((value) => {
					if (value.code == 10000) {
						this.account = value.data;

					} else {
						this.tui.toast(value.message);
					}
				})
				let bankaccount = {
					token: token,
					account_id: 'is_default'
				}
				let account_id = this.tui.request('user', 'post', bankaccount, 1000, 1, '', 'bankCard');
				Promise.resolve(account_id).then((value) => {
					if (value.code == 10000) {
						if (value.data[0]) {

							this.account_id = value.data[0].id;
							this.account_number = value.data[0].account_number;
						}


					} else {
						this.tui.toast(value.message);
					}
				})
			},
			inputMoney: function(e) {
				this.money = e.detail.value;
			},
			addAccount() {
				uni.navigateTo({
					url: '../myBank/bankList'
				});
			},
			btnSave() {
				uni.hideLoading();
				if (!this.account_id) {
					this.tui.toast('请先添加提现账号');
					return false;
				}
				if (this.noClick == true) {
					this.tui.toast('请勿重复提交');
					return false;
				}
				this.noClick = true;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					account_id: this.account_id,
					money: this.money,
				}
				let account = this.tui.request('user', 'post', datas, 1000, 1, '', 'withdraw');
				Promise.resolve(account).then((value) => {
					if (value.code == 10000) {
						this.tui.toast(value.message);
						setTimeout(() => {
							this.init()
						}, 1000)
					} else {
						this.noClick=false;
						this.tui.toast(value.message);
					}
				})
			},
			waterList() {
				uni.navigateTo({
					url: '../my/withdrawal'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.tui-content-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		/* 	top: -72rpx; */
		z-index: 10;
	}

	.tui-box {
		/* 	width: 100%; */
		margin-top: 30rpx;
		background: #fff;
		padding: 36rpx;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-btn-box {
		margin-bottom: 20rpx;
	}

	.withdraw-account {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 10rpx;
		justify-content: center;
		background: #eaeaea;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4e4d4d;
	}

	.withdraw-account-h1 {
		color: #4e4d4d;
		font-weight: bold;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.withdraw-box {
		margin-top: 40rpx;
	}

	.box-name {
		font-size: 26rpx;
		color: #3e3e3e;
	}

	.box-input {
		border-bottom: 1rpx solid #f3f2f2;
		display: flex;
		height: 100rpx;
		align-items: center;
		padding: 10rpx;
		margin-bottom: 30rpx;
		justify-content: left;
		font-size: 60rpx;
	}

	.box-input .ms {}

	.box-input .inputs {
		font-size: 60rpx;
	}

	.box-notice {
		font-size: 20rpx;
		color: #8e8d8d;
		margin-bottom: 60rpx;
	}

	.withdraw-nums {
		color: #f23030;
		display: inline;
	}

	.withdraw-txt {
		margin-top: 40rpx;
		margin-left: 20rpx;
		color: #bbb9b0;
		font-size: 22rpx;
		line-height: 44rpx;
	}
</style>
